<template>
	<view>
		<view class="wrap">
			<!-- @rightClick="rightClick" -->
			<!-- @leftClick="leftClick()" -->
			<u-navbar title="" :bgColor="'rgba(255,255,255,0)'" height="44" @leftClick="leftClick()" :autoBack="false">
			</u-navbar>
			<view class="bgImg"></view>
			<view class="manipulationS">
				<view class="manipulationTop">
					<view class="titleTop">
						<view class="titleName">
							艾灸仪A1
						</view>
						<view class="typesRongt">
							<text>{{textFontType.text}}</text>
							<image v-if="synchronizationType" class="loadingClass" src="/static/ble/pageImg/synchronizationImg.png"
								mode=""></image>
						</view>
						<!-- 电池容量 -->
						<!-- <view class="battery">
							<view class="battery-housing">
								<view class="surplus"></view>
							</view>
							<view class="battery-head"></view>
						</view> -->
					</view>
					<view class="icons">
						<view class="iconImg" @tap="onHelp()">
							<u--image src="/static/ble/helpIcon.png" class="m-b-15" width="24" height="24"
								shape="circle">
							</u--image>
						</view>
						<view class="iconImg" @tap="onKefu()">
							<u--image src="/static/ble/kefuIcon.png" class="m-b-15" width="24" height="24"
								shape="circle">
							</u--image>
						</view>
					</view>
				</view>
				<view class="bleTypeImg">
					<view class="imgs"
						:style="`opacity:${equipmentData.temperature < 60 ? '1' : '0'}; background-image: url(/static/ble/pageImg/highTemperatures.png);  width: ${bleTypeImgData.width}rpx; height: ${bleTypeImgData.height}rpx;`">
					</view>
					<view class="imgs"
						:style="`opacity:${equipmentData.temperature >= 60 ? '1' : '0'}; background-image: url(/static/ble/pageImg/normalTemperature.png); width: ${bleTypeImgData.width}rpx; height: ${bleTypeImgData.height}rpx;`">
					</view>
				</view>
			</view>
			<!--  -->
			<view v-if="(equipmentData.temperature < 45 || equipmentData.temperature > 59) && totalTime >= 240">
				<view class="equipmentBck "
					:class="equipmentData.temperature < 45 ? 'equipmentBckWarning' : equipmentData.temperature > 59 ? 'equipmentBckError' :''">
					<u-icon v-if="equipmentData.temperature < 45" name="warning" color="#f9ae3d" size="28"></u-icon>
					<u-icon v-else-if="equipmentData.temperature > 59" name="close-circle" color="'#f56c6c'" size="28">
					</u-icon>
					<view class="text">
						<view>
							请检查设备是否正常运行
						</view>
						<view>
							若始终显示异常可联系客服解决
						</view>
					</view>
				</view>
			</view>
			<view class="manipulation">
				<view class="manipulation-type padding-typeIn">
					<view class="types">
						<view class="typeIn">
							<view class="textFont">
								<view class="current-state current-state-success" v-if="equipmentData.functionTypeNum == 1">
								</view>
								<view class="current-state current-state-error" v-else></view>
								<view class="current-text">
									<text v-if="equipmentData.functionType != '5'">{{equipmentData.functionType}}</text>
									<text v-else>准备工作</text>
								</view>
							</view>
							<view class="small-print">
								设备状态
							</view>
						</view>
						<view class="lines"></view>
						<!-- <view class="typeIn lRbor">
							<view class="textFont">
								{{ timeState == 1 ? timeObject.time : timeObject.timeBackstage }}
							</view>
							<view class="small-print">
								剩余时长
							</view>
						</view> -->
						<view class="typeIn">
							<view class="textFont">
								<text v-if="equipmentData.temperature >= 45"
									:style="(equipmentData.temperature >= 60 && equipmentData.temperature < 200) ? 'color: #ff0500;' : ''">{{equipmentData.temperature == '200' ? '--' : equipmentData.temperature}}℃</text>
								<text v-else-if="equipmentData.temperature != '--' && totalTime >= 240"
									:style="'color: #eeb53f;'">{{equipmentData.temperature}}℃</text>
								<text v-else>{{equipmentData.temperature}}℃</text>
							</view>
							<view class="small-print">
								当前温度
							</view>
						</view>
					</view>
				</view>
				<view class="consumes">
					<view class="consume">
						<!-- <view class="consume-text">
							艾条消耗
						</view> -->
						<view class="consumeTimes">
							<view class="textFont">
								剩余时长：
							</view>
							<view class="small-print">
								{{ timeState == 1 ? timeObject.time : timeObject.timeBackstage }}
							</view>
						</view>
						<view class="progress-bar">
							<u-line-progress :percentage="consumptionNum" :showText="false"
								:activeColor="'linear-gradient(90deg, #1AA9EE 0%, #7AE8FE 100%)'" />
						</view>
					</view>
					<view class="close" v-if="synchronizationType">
						<view class="closeImg">
							<image src="/static/ble/pageImg/closeT.png" mode=""></image>
						</view>
						<view class="closeText" style="color: #989CA3">
							结束使用
						</view>
					</view>
					<view class="close" v-else @tap="obtain(`500101000300010004`, 'close')">
						<view class="closeImg">
							<image v-if="deviceCloseLoadingType" class="loadingClass"
								src="/static/ble/pageImg/loadingIcon.png" mode=""></image>
							<image v-else src="/static/ble/pageImg/close.png" mode=""></image>
						</view>
						<view class="closeText" style="color: #00ACFF">
							结束使用
						</view>
					</view>
				</view>
				<view class="manipulation-type padding-mbi">
					<view class="mbis">
						<view class="consume-text">
							艾灸模式
						</view>
						<view class="mbi-type">
							<view class="typeIs" v-for="(item, index) in manipulationType" :key="index"
								@tap="onManipulation(item, index)">
								<view class="insImg">
									<image v-if="synchronizationType" :src="item.clicktTypeImg" mode="">
									</image>
									<image v-else-if="item.loadingType" class="loadingClass"
										src="/static/ble/pageImg/loadingIcon.png" mode=""></image>
									<image v-else :src="item.clickType ? item.clickdTypeImg : item.clickTypeImg" mode="">
									</image>
								</view>
								<view v-if="synchronizationType" class="typeFont" :style="'color: #989CA3;'">
									{{item.name}}
								</view>
								<view v-else class="typeFont"
									:style="item.clickType && !item.loadingType ? 'color: #00acff;' : 'color: #272D38;'">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="manipulation-type padding-goTo">
					<view class="goTos">
						<view class="goTo" @tap="onGoto(1)">
							<view class="goTo-font">
								使用指南
							</view>
							<view class="goTo-img">
								<image src="/static/ble/pageImg/icon_arrow_left.png" mode=""></image>
							</view>
						</view>
						<view class="goTo" @tap="onGoto(2)">
							<view class="goTo-font">
								意见反馈
							</view>
							<view class="goTo-img">
								<image src="/static/ble/pageImg/icon_arrow_left.png" mode=""></image>
							</view>
						</view>
					</view>
		
				</view>
			</view>
			<view class="slideUp" @touchstart="fingerstart">
				<image src="/static/ble/slideUp.png" mode=""></image>
				<view class="slideUpName">
					上划查看已获得元气
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="modals.show" :showCancelButton="true" :title="modals.title" :content='modals.content'
				@cancel="onCancel()" @confirm="confirmText()"></u-modal>
			<example-popup ref="examplePopups" v-if="examplePopupsState" :id="massage_id" :pageTime="totalTime"
				:temperature="equipmentData.temperature" @onClearTime="onClearTimes" @stateIndex="onStateIndex"
				@vitalityData="onVitalityData" @onClear="onClears" @messageComplete="clearTime()" @consoleExit="toBreakOff(1)"></example-popup>
			<u-overlay opacity="0.7" :show="loadingPageType">
				<view class="warp">
					<view class="icons">
						<u-loading-icon mode="semicircle" color="#b3b6bc" size="40"></u-loading-icon>
					</view>
					<view class="text">
						<view class="textOne textTips">
							剩余使用时长计算中
						</view>
						<view class="textTwo textTips">
							
						</view>
					</view>
				</view>
			</u-overlay>
			<!-- 元气硬件引导 -->
		</view>
		<animation-rule ref="animationRule" @guideEnd="onGuideEnd"></animation-rule>
	</view>
</template>

<script>
	import Bluetooth from '@/pages/town/common/Bluetooth.js';
	import {
		saveImg
	} from '@/utility/download.js'
	import examplePopup from '@/pages/town/components/examplePopup.vue';
	import animationRule from '../components/animationRule.vue'
	import {
		manipulationType
	} from '@/pages/town/common/command.js';
	import {
		special_effects_check
	} from '@/api/collection.js'
	import {
		massagePause,
		massageStart
	} from '@/api/bluetooth.js'
	let bluetooth = new Bluetooth();
	export default {
		components: {
			examplePopup,
			animationRule
		},
		data() {
			return {
				modals: {
					show: false,
					title: '警告',
					content: '返回会断开连接，确定要返回吗？'
				},
				bleTypeImgData: { //图片大小
					width: 350,
					height: 400
				},
				startData: {
					clientY: 0
				},
				textFontType: { //当前文本提示状态
					text: '', //文本
					type: 2 //1为同步成功，2为同步中
				},
				synchronizationType: false, //数据是否同步中
				message: '', //消息提示
				now: 0, //开始时间
				end: 0, //结束时间
				timeState: 2, //设备剩余时间使用  1使用blue蓝牙时间  2使用后端返回设备剩余时间
				timeObject: { //timeState == 1 则使用 time  反之使用timeBackstage
					time: '--:--',
					timeBackstage: '--:--'
				},
				typeIndex: 0, //当前模式选中下标
				consumptionNum: 100, //艾条消耗
				equipmentData: { //设备返回信息
					functionType: '5', //5 设备准备中
					temperature: '--' //设备温度默认值
				}, //当前设备信息
				setInterval: 0, //获取设备信息定时器
				setCountTime: 0, //设备倒计时定时器
				setMessageTime: 0, //元气产出定时器
				setTotalTime: 0, //总共使用时长
				totalTime: 0, //进入页面时长
				slidingType: 0, //判断上滑下滑
				deviceCloseLoadingType: false, //设备关闭loading显示
				manipulationType: manipulationType, //艾灸挡位
				switchType: true, // 模式是否切换完毕
				propId: '', //道具ID
				massage_Type: '', //当前模式需要给后端的值
				calcVitalityType: false, //告诉后端是否可以开始计算元气
				buckledState: true, //设备扣合状态
				isHide: false, //是否放入后台
				massage_id: '', //使用ID
				errIndex: 0, //链接错误次数
				vitalityObject: {}, //后端元气数据
				remaining_time: '', //后端计算倒计时时间戳存储
				statePopup: 1, //弹框只执行一次
				loadingPageType: false ,//加载动画
				examplePopupsState: true//控制弹框是否运行
			}
		},
		computed: {},
		onHide() {
			//隐藏页面后存入道具ID以及deviceId  方便突然断链后进入首页重新判断匹配连接
			// this.onSetStroage();
			// this.hideMassageRecord();
			// // this.clearTime();
			// this.isHide = true
		},
		onShow() {
			// if(this.isHide){
			// 	this.isHide = false
			// 	this.onDataSynchronization();
			// }
		},
		onUnload() {
			this.toBreakOff(2)
		},
		onLoad(param) {
			this.onUpdateAnimation()
			// #ifdef APP-PLUS
			var page = this.$mp.page.$getAppWebview();
			page.setStyle({ popGesture: 'none' });
			// #endif
			if (param.id) {
				this.propId = param.id
				console.log('propId1', this.propId)
				this.startMassage(param.id);
			}
			this.onDataSynchronization();
		},
		methods: {
			//动画引导
			async onUpdateAnimation() {
				// this.$refs.animationRule.onOpen();
				let distinguish = 'manipulationPage'
				try {
					const res = await special_effects_check({
						distinguish: distinguish
					})
					let data = res.data.data;
					let arr = Object.values(data)
					if (!arr.length) this.examplePopupsState = true;
					arr.forEach((item, index) => {
						switch (item) {
							case 'town_control_details':
								let animationName = item
								this.$refs.animationRule.onOpen(distinguish, animationName);
								break;
							default:
								break;
						}
					})
				} catch (e) {
					console.log(e)
				}
			},
			//动画引导结束
			onGuideEnd(){
				this.examplePopupsState = true;
			},
			onHelp(){
				uni.navigateTo({
					url: '/pages/index/outerChain?url=http://api.relaverse.cn/index/Html/individually13?id=14&title=元气硬件使用规则'
				})
			},
			onKefu(){
				this.$refs.examplePopups.onSwitch(11, 'open')
			},
			/**
			 * @param {Number} num 若请求成功 错误数量为0
			 */
			onStateIndex(num) {
				console.log('错误增加清除')
				this.errIndex = num
			},
			//开始使用*
			async startMassage(id) {
				let _this = this
				try {
					let data = {
						props_id: id,
						massage_type: ''
					}
					let param = {
						data: _this.$rsa.rsaEncrypt(JSON.stringify(data)),
						timestamp: _this.$rsa.nowTime(),
						nonce: _this.$rsa.randomString(16)
					}
					const datas = await massageStart(
						Object.assign(param, {
							sign: _this.$rsa.onRsaSign(param)
						})
					)
					console.log(123124, datas)
					this.massage_id = datas.data.massage_id
				} catch (e) {
					console.log(e)
				}
			},

			//APP挂入后台执行暂停方法
			async hideMassageRecord() {
				let _this = this
				try {
					let data = {
						massage_id: _this.massage_id
					}
					let param = {
						data: _this.$rsa.rsaEncrypt(JSON.stringify(data)),
						timestamp: _this.$rsa.nowTime(),
						nonce: _this.$rsa.randomString(16)
					}
					const datas = await massagePause(
						Object.assign(param, {
							sign: _this.$rsa.onRsaSign(param)
						})
					)
				} catch (e) {
					console.log(e)
				}
			},
			//关闭定时器
			clearTime() {
				console.log('关闭了所有定时器')
				clearInterval(this.setInterval);
				clearInterval(this.setCountTime);
				clearInterval(this.setMessageTime);
				clearInterval(this.setTotalTime);
			},
			//结束使用
			onCloseMessageEnd() {
				for (let i = 0; i < this.manipulationType.length; i++) {
					this.manipulationType[i].clickType = false
				}
				this.$refs.examplePopups.onClose()
				uni.hideLoading()
				this.$refs.examplePopups.onMessageEnd(this.massage_Type)
			},
			onGoto(e) {
				if (e == 1) {
					uni.navigateTo({
						url: './mapLocation'
					})
				} else {
					let url = 'https://jinshuju.net/f/yUeVHj'
					uni.navigateTo({
						url: `/pages/collection/otherPage?url=${url}`
					})
				}

			},
			/**
			 * 设备命令操作
			 * 
			 * @param {String} value 命令操作值
			 * @param {String} type	 close：关闭设备  maniP：模式切换
			 * @param {Number} index 当前选中模式下标
			 */
			obtain(value, type, index) {
				console.log('timeBackstage', this.timeObject.timeBackstage)
				if (type == 'close') {
					this.deviceCloseLoadingType = true
					this.$refs.examplePopups.onClearType(2)
					this.$refs.examplePopups.onSwitch(8, 'open')
					return false
				}
				this.loadingPageType = true
				bluetooth.writeStr(value).then((res) => {
					if (type == 'maniP') {
						this.onData();
					}
				}).catch((err) => {
					this.$refs.uToast.show({
						type: 'default',
						title: '失败',
						message: "操作失败, 请重新连接~"
					});
					console.log('err', err)
					setTimeout(() => {
						this.toBreakOff(1);
					}, 2000)
				})
			},
			/**
			 * 关机操作
			 * @param {String} type 
			 */
			onClears(type) {
				console.log('types', type)
				this.deviceCloseLoadingType = false
				if (type) {
					// 500101002100000021  设备历史数据指令
					// 50 01 01 00 21 00 00 21
					bluetooth.writeStr('500101000300010004').then((res) => {
						this.toBreakOff(1);
						console.log('44444444',res)
					}).catch((err) => {
						this.$refs.uToast.show({
							type: 'default',
							title: '失败',
							message: "操作失败, 请重新连接~"
						});
						uni.hideLoading()
						
						console.log('err', err)
						setTimeout(() => {
							this.toBreakOff(1);
						}, 2000)
					})
				}
			},
			/**
			 * 断开后释放资源并返回
			 * @param {Number} type 1则结束使用 2则断开当前蓝牙
			 */
			toBreakOff(type) {
				this.clearTime();
				this.loadingPageType = false
				bluetooth.closeBLEConnection().then(res => {
					let storage = ['deviceId', 'notifyId']
					uni.getSystemInfoSync().platform == 'android' ? storage.push('servicesId') : storage.push(
						'serviceId')
					for (let i = 0; i < storage.length; i++) {
						uni.setStorageSync(storage[i], '')
					}
					bluetooth.closeBluetoothAdapter()
					if(type == 1) this.onCloseMessageEnd();
				}).catch((err) => {
					bluetooth.onCacheDataClearing();
					if(type == 1) this.onCloseMessageEnd();
				})
			},
			//设备APP蓝牙数据同步
			onDataSynchronization() {
				this.synchronizationType = true
				this.switchType = false;
				this.clearTime();
				this.textFontType.text = '正在同步数据'
				this.timeState == 1 ? this.timeObject.time = '--:--' : this.timeObject.timeBackstage = '--:--'
				this.equipmentData.temperature = '--'
				this.information();
				uni.setStorageSync('connectionFailed', false)
				this.onEquipmentState();
			},
			//在某些情况下出现问题让后端不开始计算元气
			async onRejectCalculation() {
				//每隔三分钟查询一次问题如果没有达到46°或者以上不让后端计算
				if (this.equipmentData.temperature < 46) {
					this.calcVitalityType = false
					//判断设备未扣合状态 如果是未扣合状态禁止后端计算元气
				} else if (this.equipmentData.temperature == 200) {
					this.calcVitalityType = false
				} else {
					this.calcVitalityType = true
				}
				this.$refs.examplePopups.onVitality(this.massage_Type, this.calcVitalityType)
			},
			/**
			 * 请求超过三次失败断开连接
			 */
			onClearTimes() {
				this.errIndex += 1
				console.log('当前错误次数', this.errIndex)
				if (this.errIndex == 10) {
					this.toBreakOff(1)
				}
				// else {
				// 	this.$refs.examplePopups.onIndexState()
				// 	this.onDataSynchronization();
				// }
			},
			/**
			 * @param {Object} item 从子组件拿取后端返回的元气使用中的值
			 */
			onVitalityData(item) {
				let value,
					durationTypeTime =
					'connectTime'; //两种使用*总时长选择  equipmentTime 设备运行总时长  connectTime 进入页面总时长
				if (durationTypeTime == 'equipmentTime') {
					this.totalDuration(this.now)
				} else if (this.timeState == 2 && durationTypeTime == 'connectTime') {
					console.log('dataSwitchType', this.switchType)
					if (this.switchType) {
						this.loadingPageType = false
						this.vitalityObject = item
						clearInterval(this.setTotalTime);
						this.setTotalTime = setInterval(() => { //总共时间处理
							this.totalTime += 1
							this.onModeProcessing()
							this.timeObject.timeBackstage = this.countTimeTwo()
						}, 1000)
					}
				}
			},
			//总数据获取
			async information() {
				this.onData();
				//获取设备信息
				this.setInterval = setInterval(() => { //每隔三秒去拿一次数据 因为设备每三秒上报一次
					this.$nextTick(() => {
						bluetooth.onHideType(this.$hideType)
						this.equipmentData = bluetooth.onCallbackInformation()
						if (this.equipmentData.connectionFailed) {
							this.$refs.uToast.show({
								type: 'default',
								title: '连接断开',
								message: "连接断开, 请重新连接~"
							});
							setTimeout(() => {
								this.toBreakOff(1)
							}, 2000)
						}
						this.onEquipmentState();
						this.onModeProcessing();
						this.onSetStroage()
					})
				}, 3000)
				//获取元气数据
				setTimeout(() => {
					this.$nextTick(() => {
						this.$refs.examplePopups.onVitality(this.massage_Type, this.calcVitalityType)
						this.setMessageTime = setInterval(() => { //使用中产出元气
							this.onRejectCalculation()
						}, 15000)
						//是否弹出提示框
						if (this.statePopup == 1) {
							this.statePopup = 2
							//先弹出续期提示 后弹出温馨提示
							if (!uni.getStorageSync('cozyTypeState')) {
								this.$refs.examplePopups.onSwitch(10, 'open')
							} else {
								this.$refs.examplePopups.onSwitch(1, 'open')
							}
						}
					})
				}, 3000)
			},
			//隐藏页面后存入道具ID以及deviceId  方便突然断链后进入首页重新判断匹配连接
			onSetStroage() {
				uni.setStorageSync('connectData', {
					id: this.propId, //道具ID
					deviceId: uni.getStorageSync('deviceId'), //蓝牙ID
					massage_Type: this.massage_Type //使用挡位
				})
			},
			//设备未扣合和设备扣合状态下执行操作
			onEquipmentState() {
				//未扣合
				if (this.equipmentData.temperature == 200) {
					clearInterval(this.setCountTime);
					clearInterval(this.setMessageTime);
					clearInterval(this.setTotalTime);
					this.buckledState = false
					this.$refs.examplePopups.onClose();
					this.$refs.examplePopups.onSwitch(3, 'open')
				} else if (!this.buckledState) {
					//扣合
					clearInterval(this.setInterval);
					this.buckledState = true
					this.$refs.examplePopups.onSwitch(3, 'close')
					this.onDataSynchronization()
				}
			},
			//处理时间以及数据
			onData() {
				clearInterval(this.setCountTime);
				clearInterval(this.setTotalTime);
				setTimeout(() => {
					this.timeState == 1 ? this.timeObject.time = '--:--' : this.timeObject.timeBackstage = '--:--'
					this.equipmentData = bluetooth.onCallbackInformation()
					this.now = parseInt(this.equipmentData.time, 16);
					let index = this.equipmentData.pattern,
						text;
					this.$nextTick(() => {
						for (let i = 0; i < this.manipulationType.length; i++) {
							this.manipulationType[i].loadingType = false //切换是否加载动画
						}
					})
					this.manipulationType[index].clickType = true
					this.timeState == 1 ? this.onModeProcessing() : '';
					if (index == 0) {
						text = '温养'
						this.end = 3600
						this.massage_Type = 'weak'
					} else if (index == 1) {
						text = '舒适'
						this.end = 3000
						this.massage_Type = 'middle'
					} else {
						text = '强劲'
						this.end = 2400
						this.massage_Type = 'powerful'
					}
					this.textFontType.text = `当前模式：${text}模式`;
					if (this.timeState == 1) {
						this.setCountTime = setInterval(() => { //倒计时时间处理
							this.timeObject.time = this.countTime()
						}, 1000)
					}
					this.switchType = true
					this.synchronizationType = false
					console.log('switchType', this.switchType)
					this.$forceUpdate()
				}, 3000)

			},
			//获取数据后处理
			onModeProcessing() {
				let index = this.equipmentData.pattern
				if (this.timeState == 1) {
					this.consumptionNum = 100 - parseInt((parseInt(this.timeObject.time, 16) / this.manipulationType[index]
						.time * 100)) //艾条消耗
				} else {
					let times = this.vitalityObject.remaining_time - Math.floor(new Date().getTime() / 1000)
					this.consumptionNum = parseInt((parseInt(times) / this.manipulationType[index]
						.time * 100)) //艾条消耗
				}
			},
			//模式切换
			onManipulation(item, index) {
				if (this.timeState == 2) {
					this.timeObject.timeBackstage = '--:--'
					this.onRejectCalculation() //模式切换完毕后 重新调取后端接口 拿取新的剩余使用*时长
				} else {
					this.timeObject.time = '--:--'
				}
				//确保每次切换是否执行完毕再执行
				if (this.switchType && !this.synchronizationType) {
					this.switchType = false
					this.manipulationType[index].loadingType = true //切换是否加载动画
					this.$nextTick(() => {
						for (let i = 0; i < this.manipulationType.length; i++) {
							this.manipulationType[i].clickType = false
						}
					})
					this.obtain(item.instructions, 'maniP', index)
				}
			},
			//总共使用时长
			totalDuration(time) {
				// 转换为式分秒
				let m = parseInt(time / 60 % 60)
				m = m < 10 ? '0' + m : m
				let s = parseInt(time % 60)
				s = s < 10 ? '0' + s : s
				this.$refs.examplePopups.onTotalTime(`${m} : ${s}`)
			},
			//timeState == 1 倒计时
			countTime() {
				this.now += 1
				//时间差
				var leftTime = this.end - this.now;
				var m, s, data;
				if (leftTime >= 0) {
					m = Math.floor(leftTime / 60 % 60);
					s = Math.floor(leftTime % 60);
					data = `${this.zero(m)}:${this.zero(s)}`
				} else {
					this.now = 0
					clearInterval(this.setCountTime)
				}
				return data
			},
			//timeState == 2 倒计时
			countTimeTwo() {
				//时间差
				var leftTime = this.vitalityObject.remaining_time - Math.floor(new Date().getTime() / 1000);
				var m, s, data;
				if (leftTime >= 0) {
					m = Math.floor(leftTime / 60 % 60);
					s = Math.floor(leftTime % 60);
					data = `${this.zero(m)}:${this.zero(s)}`
				} else {
					this.vitalityObject.remaining_time = 0
					// clearInterval(this.setCountTime)
					this.toBreakOff(1)
				}
				return data
			},
			//时间0 自动补齐
			zero(num) {
				if (num < 10) {
					return '0' + num
				}
				return num
			},

			//上滑动显示元气
			fingerstart(e) {
				console.log(112, '进行上滑')
				this.$refs.examplePopups.onSwitch(1, 'open')
			},
			// fingerend(e) {
			// 	const subY = e.changedTouches[0].clientY - this.startData.clientY;
			// 	if (subY > 50 || subY < -50) {
			// 		if (subY > 50) {
			// 			this.slidingType = 2
			// 			console.log('下滑')
			// 		} else if (subY < -50) {
			// 			this.slidingType = 1
			// 			console.log('上滑')
			// 		}
			// 	}
			// },
			onToSearch() {
				uni.navigateTo({
					url: './search',
					animationType: 'slide-in-right',
					animationDuration: 2000
				})
			},
			leftClick() {
				// this.modals.show = true
				// uni.navigateBack()
				this.$refs.examplePopups.onClearType(1)
				this.$refs.examplePopups.onSwitch(8, 'open')
			},
			onCancel() {},
		}
	}
</script>
<style>
	page,
	body {
		background: url('/static/ble/pageImg/bg.png') no-repeat center center fixed;
		background-size: cover;
		box-sizing: border-box;
	}
</style>
<style lang="scss" scoped>
	
	.warp {
		text-align: center;
		color: #b3b6bc;
		position: absolute;
		top: 50%;
		bottom: 50%;
		font-size: 34rpx;
		width: 100%;
		margin: auto;

		.text {
			margin-top: 80rpx;
			text-align: center;

			.textTwo {
				margin-top: 30rpx;
			}
		}
	}

	.equipmentBck {
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		transition: all .5s;

		.text {
			margin-left: 16rpx;
		}
	}

	.equipmentBckWarning {
		background-color: #fdf6ec;
		color: #f9ae3d;
	}

	.equipmentBckError {
		background-color: #fef0f0;
		color: #f56c6c;
	}

	// $myBts:24rpx;
	.bgImg {}

	.slideUp {
		text-align: center;

		image {
			width: 78rpx;
			height: 48rpx;
			margin: 20rpx 0 30rpx;
		}

		.slideUpName {
			font-size: 24rpx;
			color: #a2a2a2;
		}
	}

	.wrap {
		padding: 32rpx;
	}

	.manipulationS {
		margin: 100rpx 24rpx;
		.manipulationTop{
			
			display: flex;
			justify-content: space-between;
			.icons{
				padding-top: 20rpx;
				view:first-child{
					margin-bottom: 70rpx;
				}
			}
			.titleTop{
				.titleName {
					font-size: 80rpx;
					font-family: PingFangSC-Light, PingFang SC;
					font-weight: 300;
					color: #313B47;
				}
				
				.typesRongt {
					margin-top: 4rpx;
					display: flex;
					align-items: center;
				
					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #4F5D6E;
					}
				
					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 8rpx;
					}
				}
				
				.battery {
					display: flex;
					align-items: center;
					margin-top: 17rpx;
				
					.battery-housing {
						width: 30rpx;
						height: 14rpx;
						border: 3rpx solid #4F5D6E;
						padding: 2rpx;
						border-radius: 2rpx;
				
						.surplus {
							width: 100%;
							height: 14rpx;
							background: #4F5D6E;
							border-radius: 2rpx;
						}
					}
				
					.battery-head {
						width: 3rpx;
						height: 12rpx;
						background: #4F5D6E;
						margin-left: 2rpx;
					}
				}
			}
			
		}
		
	}

	.loadingClass {
		animation: whirling 2s linear infinite;
	}

	.manipulation {
		.consumes {
			display: flex;
			align-items: center;

			.consume {
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 0 24rpx 24rpx 0;
				padding: 40rpx 32rpx;
				width: 70%;
				.consumeTimes{
					display: flex;
					margin-bottom: 38rpx;
					.textFont{
						font-size: 32rpx;
						font-weight: 700;
						color: #272D38;
					}
					.small-print{
						font-size: 32rpx;
						margin-left: 10rpx;
						color: #767676;
					}
				}
				.consume-text {
					font-size: 32rpx;
					font-weight: 700;
					color: #272D38;
					margin-bottom: 38rpx;
				}
			}
			
			.close {
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				width: 20%;

				.closeImg {
					display: flex;
					justify-content: center;
					margin-bottom: 16rpx;



					image {
						width: 88rpx;
						height: 88rpx;
					}
				}

				.closeText {
					font-size: 28rpx;
					font-weight: 400;
					color: #00ACFF;
					text-align: center;
				}
			}
		}

		.manipulation-type {
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-bottom: 24rpx;

			.types {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.lRbor {
					border-left: 1rpx solid #C7C7C7;
					border-right: 1rpx solid #C7C7C7;
					padding: 0 57rpx;
					margin: 0 55rpx;
				}
				.lines{
					height: 95rpx;
					width: 2rpx;
					background: #dcdcdc;
				}
				.typeIn {
					text-align: center;
					width: 44%;
					.textFont {
						color: #313B47 !important;
						font-size: 34rpx;
						font-weight: 700;
						display: flex;
						align-items: center;
						justify-content: center;

						.current-state {
							border-radius: 50%;
							margin-right: 8rpx;
							width: 16rpx;
							height: 16rpx;
						}

						.current-state-success {
							background: #00D914;
						}

						.current-state-error {
							background: #ff0000;
						}
					}

					.small-print {
						margin-top: 15rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #989CA3;
					}
				}
			}

			.mbis {
				.consume-text {
					font-size: 32rpx;
					font-weight: 700;
					color: #272D38;
					margin-bottom: 24rpx;
				}

				.mbi-type {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.typeIs {
						.insImg {
							margin-bottom: 16rpx;

							image {
								width: 88rpx;
								height: 88rpx;
							}
						}

						.typeFont {
							font-size: 28rpx;
							font-weight: 400;
							color: #272D38;
							text-align: center;
						}
					}
				}
			}

			.goTos {
				.goTo {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 31rpx 40rpx;

					.goTo-font {
						font-size: 28rpx;
						font-weight: 400;
						color: #272D38;
					}

					.goTo-img {
						image {
							width: 24rpx;
							height: 24rpx;
						}
					}
				}
			}
		}

		.padding-typeIn {
			padding: 34rpx 30rpx;
		}

		.padding-mbi {
			padding: 40rpx 32rpx;
		}
	}

	.bleTypeImg {
		display: flex;
		justify-content: center;
		position: relative;
		width: 300rpx;
		height: 400rpx;
		margin: 80rpx auto 0;

		.imgs {
			background-size: 100% 100%;
			position: absolute;
			transition: all .3s;
		}

		image {
			transition: all 0.5s ease 0s;
		}

		// position: sticky;
		// top: 20px
	}

	@keyframes whirling {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	// .heights {
	// 	height: 2000px;
	// 	width: 100%;
	// }
</style>
